// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-mozilla';

// * -------------------------------------------------------------------------- */
// Main Hero

.mzp-c-callout.mzp-t-product-firefox.mzp-t-hero {
    background: $color-white;

    .mzp-c-callout-desc {
        @include text-title-xs;
    }

    .thanks-help-text {
        @include text-title-2xs;
        margin-top: $layout-lg;
    }
}

// * -------------------------------------------------------------------------- */
// Conditional State

.thanks-state-not-default-desktop,
.thanks-state-not-default-android,
.thanks-state-not-default-ios,
.thanks-state-is-default {
    display: none;
}

/* Fade in success message. */
.thanks-state-is-default,
.thanks-extra-links {
    @include animation(mzp-a-fade-in 300ms ease-in 0ms 1 normal both);
}

.is-firefox {
    .thanks-state-not-firefox {
        display: none;
    }

    .thanks-state-not-default-desktop {
        display: block;
    }

    .thanks-extra-links {
        visibility: hidden;
    }
}

.is-firefox.android {
    .thanks-state-not-default-desktop {
        display: none;
    }

    .thanks-state-not-default-android {
        display: block;
    }
}

.is-firefox.ios {
    .thanks-state-not-default-desktop {
        display: none;
    }

    .thanks-state-not-default-ios {
        display: block;
    }
}

.is-firefox-default {
    .thanks-state-not-default-desktop {
        display: none;
    }

    .thanks-state-is-default {
        display: block;
    }

    .thanks-extra-links {
        visibility: visible;
    }
}

// * -------------------------------------------------------------------------- */
// Extra links section

.thanks-extra-links {
    background-color: $color-marketing-gray-20;
    padding: $layout-md 0;

    .thanks-extra-links-item {
        @include border-box;
        margin-bottom: $spacing-lg;
        padding: 0 $spacing-md;

        &.mobile .thanks-extra-links-heading {
            background-image: url('/media/img/firefox/set-as-default/thanks/mobile.svg');
        }

        &.join .thanks-extra-links-heading {
            @include background-size(30px 30px);
            background-image: url('/media/img/firefox/set-as-default/thanks/mozilla-logo.svg');
        }

        &.help .thanks-extra-links-heading {
            @include background-size(29px 29px);
            background-image: url('/media/img/firefox/set-as-default/thanks/help.svg');
        }
    }

    .thanks-extra-links-heading {
        background-repeat: no-repeat;
        padding-top: $spacing-2xl;
    }

    @media #{$mq-lg} {
        @include clearfix;
        padding: $layout-lg 0;

        .thanks-extra-links-item {
            width: 33.3%;
            @include bidi((
                (float, left, right),
            ));
        }
    }
}

.thanks-extra-links-heading {
    @include text-title-xs;
}
